<!-- 科技培训 -->
<template>
	<div class="sclence" :class="{isuser:status == 1}">
		<img src="@/assets/goods.png" alt="">
		<div class="sclence_r">
			<p class="snp1">{{list.list.trainingName}}</p>
			<span>{{list.list.trainingName}} - {{list.list.registerEndTime}}</span>
			<button v-if="list.list.enrollStatus == 'notEnroll' || list.list.enrollStatus == 'failed'" class="btn1" @click="goDetail('baoming')">报名</button>
			<button v-if="list.list.enrollStatus == 'learning'||list.list.enrollStatus == 'enroll'||list.study == 1" class="btn2" @click="goDetail('jx')">继续学习</button>
			<button v-if="list.list.enrollStatus == 'overEnroll'||list.study == 2" class="btn3">已结束</button>
		</div>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	import { onBeforeMount } from 'vue'
	const router = useRouter()
	const list = defineProps({
		type:Number,
		status:Number,
		list:Object,
		study:1
	})
	onBeforeMount(()=> {
		
	})
	const goDetail = (name) => {
		if(name == 'baoming'){
			router.push({
				path:'/apply',
				query:{type:1,id:list.list.trainingUuid}
			})
		}else if(name == 'jx'){
			router.push({
				path:'/apply',
				query:{type:2,id:list.list.trainingUuid}
			})
		}else{
			
		}
	}
</script>

<style scoped lang="scss">
	.sclence{
		display: flex;
		margin-top: 30px;
		width: 555px;
		background: #FFFFFF;
		border-radius: 10px;
		border: 1px solid rgba(17,145,142,0.1);
		padding: 15px;
		img{
			width: 162px;
			height: 108px;
			margin-right: 15px;
		}
		&_r{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			button{
				width: 92px;
				height: 33px;
				border-radius: 5px;
				font-size: 16px;
				font-weight: 600;
				color: #FFFFFF;
			}
			.btn1{
				background-color: #11918E;
			}
			.btn2{
				background-color: #69A800;
			}
			.btn3{
				background-color: #EDEDED;
				color: #B3B3B3;
			}
			// p{
			// 	width: 340px;
			// }
			span{
				
			}
		}
	}
	.isuser{
		width: 435px;
	}
	
	
</style>